<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
		    商品：<input type="text" v-model="product.name" /><br />
		    数量：<input type="text" v-model="product.num" /><br />
		    价格：<input type="text" v-model="product.price" /><br />
		    <button @click="addCar">添加到购物车</button>
		    <ul>
		      <li v-for="item in productList">
		        <strong>{{item.name}}</strong>
		        的数量是<strong>{{item.num}}</strong>,
		        单价是<strong>{{item.price}}</strong>,
		        小计：<u>{{item.num*item.price}}</u>
		      </li>
		      {{totalProduct}}
		      <li>总计：总数----<u>{{totalNum}}</u>----总价----<u>{{totalPrice}}</u></li>
		    </ul>
		  </div>
		
		<div id="app2">
		    <h2>去除空格</h2>
		    <input type="text" v-model="context" />
		    <h2>{{ context | filterA }}</h2>
		    <hr />
		    <h2>四舍五入</h2>
		    <input type="text" v-model="price" />
		    <h2>{{ price | filterB }}</h2>
		  </div>
		  <script>
		    new Vue({
		      el: "#app",
		      data: {
		        product: {
		          name: "",
		          num: "",
		          price: ""
		        },
		        productList: [
		          {
		            name: "纸巾",
		            num: 5,
		            price: 10
		          },
		          {
		            name: "牙杯",
		            num: 6,
		            price: 8
		          },
		          {
		            name: "笔",
		            num: 2,
		            price: 15
		          }
		        ],
		        totalNum: 0,
		        totalPrice: 0
		      },
		
		      methods: {
		        addCar () {
		          if (JSON.stringify(this.product) != '{}') {
		            this.productList.push(this.product)
		            this.product = {};
		          }
		        }
		      },
		      computed: {
		
		        totalProduct () {
		          const length = this.productList.length
		          if (length != 0) {
		            for (i = 0; i < length; i++) {
		              this.totalNum += parseInt(this.productList[i].num)
		              this.totalPrice += parseInt(this.productList[i].num) * parseInt(this.productList[i].price)
		            }
		          }
		        }
		      }
		    })
			
			new Vue({
			      el: "#app2",
			      data: {
			        context: "",
			        price: 0
			      },
			
			      filters: {
			        filterA: function (value) {
			          return value.split(" ").join('')
			        },
			
			        filterB: function (value) {
			          if (value == '') return
			          return parseFloat(value).toFixed(2) + "元";
			        }
			      }
			    })
		  </script>
	</body>
</html>
